<template>
    <div class="leftFx">
        <ThemeTitle :title="title"/>
        <!-- 自然灾害 -->
        <div class="geoIntro" style="margin-top:23px">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">自然灾害</div>
            </div>
        </div>
        <!-- 饼图 -->
        <div id="natural"></div>
        <!-- 风险统计 -->
        <div class="fourDisasters">
            <div class="disaster" v-for="(item,index) in disasterList" :key="index">
                <div class="upContent">
                    <div>
                        <div></div>
                    </div>
                    <div>{{item.name}}</div>
                </div>
                <div class="downContent">
                    <div></div>
                    <div>{{item.value}}
                        <span>处</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 安全生产 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">安全生产</div>
            </div>
        </div>  
        <div class="safeProduc">
            <div class="dangerItem">
                <span>危化品与非煤矿企业：</span>
                <span>128处</span>
            </div>
            <div class="enterpriseNum">
                <div class="enterprise" 
                    v-for="(item,index) in enterpriseList" 
                    :key="index"
                >
                    <div>{{item.name}}</div>
                    <div>{{item.val}}</div>
                </div>
            </div>
            <div class="twoPoints">
                <span>两点：</span>
                <span>危化品园区</span>
                <span>琼中海峡</span>
            </div>
            <div class="oneArea">
                <span>一面：</span>
                <span>全省公路铁路网</span>
            </div>
        </div>
        <div class="troubleMsg">
            <div class="troubleTitle">
                    &raquo;
                    事故信息
                    &laquo; 
            </div>
            <div class="troubleList">
                <div class="troubleItem"
                    v-for="(item , index) in troubleList" :key="index"
                >
                    {{item}}
                </div>
            </div>
        </div>
        
        
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            provide("title", "风险分析"); 
            const { ctx } = getCurrentInstance();

            const numList = [
                2,5,1,3,8,0
            ]
            const carouselList = [
                {imgSrc:"",dec:"海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"",dec:"北以琼州海峡与广东划界，海南省是中华人民共和国最南端的省级行政区，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"",dec:"西临北部湾与广西、越南相对，海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"}
            ]
            const disasterList = [
                {name:'水旱灾害风险区',value:'7250'},
                {name:'地质灾害风险区',value:'156'},
                {name:'地震灾害风险区',value:'0'},
                {name:'森草火灾风险区',value:'4'}
            ]
            const enterpriseList = [
                {name: '危化品企业',val: 100 },
                {name: '非煤矿企业',val: 28 }
            ]
            const troubleList = [
                "2020年12月10日，xx市xx区xxx园区内发生特大火灾......",
                "2020年12月10日，xx市xx区xxx园区内发生特大火灾......",
                "2020年12月10日，xx市xx区xxx园区内发生特大火灾......",
                "2020年12月10日，xx市xx区xxx园区内发生特大火灾......",
                "2020年12月10日，xx市xx区xxx园区内发生特大火灾......"
            ]
            function drawchart(){
                var dom = document.getElementById("natural");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        animation: true,
                        title: {
                            text: "火点类型",
                            // "subtext": "火点类型",
                            x: "31%",
                            y: "center",
                            textStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center",
                                width: "200px"
                            },
                            subtextStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center"
                            }
                        },
                        legend: {
                            width: "30%",
                            left: "right",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            icon: "circle",
                            right: "0",
                            bottom: "0",
                            padding: [10, 30],
                            itemGap: 20,
                            data: ["工厂热源", "秸秆焚烧", "森林火灾", "草原火灾"]
                        },
                        series: [{
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["65%", "90%"],
                            color: ['#2ECACE', '#2039C3', '#0F9AF8', '#2B63D5'],
                            startAngle: 135,
                            labelLine: {
                                normal: {
                                    length: 25
                                }
                            },
                            label: {
                                normal: {
                                    formatter: "{b|{b}:}\n{hr|}\n {per|{d}%} ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 20,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#b3e5ff",
                                            fontSize: 14,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 14,
                                            padding: [5, 8],
                                            borderRadius: 2
                                        }
                                    },
                                    textStyle: {
                                        color: "#fff",
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                show:false,
                                position:[30,50],
                                label: {
                                    show: true,
                                    formatter: "{b|{b}:}  {per|{d}%}  ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 22,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#fff",
                                            fontSize: 18,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 25,
                                            padding: [5, 6],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [{
                                name: "工厂热源",
                                value: 55
                            }, {
                                name: "秸秆焚烧",
                                value: 30
                            }, {
                                name: "森林火灾",
                                value: 10
                            }, {
                                name: "草原火灾",
                                value: 5
                            }
                            ]
                        }, {
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["55%", "57%"],
                            label: {
                                show: false
                            },
                            data: [{
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            // colorStops: [{
                                            //     offset: 0,
                                            //     color: "#9F17FF"
                                            // }, {
                                            //     offset: 0.2,
                                            //     color: "#01A4F7"
                                            // }, {
                                            //     offset: 0.5,
                                            //     color: "#FE2C8A"
                                            // }, {
                                            //     offset: 0.8,
                                            //     color: "#FEE449"
                                            // }, {
                                            //     offset: 1,
                                            //     color: "#00FFA8"
                                            // }],
                                            colorStops: [{
                                                offset: 0,
                                                color: "#fff"
                                            }, {
                                                offset: 0.2,
                                                color: "#fff"
                                            }, {
                                                offset: 0.5,
                                                color: "#fff"
                                            }, {
                                                offset: 0.8,
                                                color: "#fff"
                                            }, {
                                                offset: 1,
                                                color: "#fff"
                                            }]
                                        }
                                    }
                                }
                            }]
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }

            onMounted(()=>{
                drawchart()
            })
            return {
                numList,
                carouselList,
                disasterList,
                enterpriseList,
                troubleList
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
    .leftFx
        #natural
            margin-top: vh(20)
            width: 100%
            height: vh(140)
        .fourDisasters   
            display: flex
            justify-content : space-between
            flex-wrap: wrap
            margin-top: vh(25)
            .disaster
                flex-shrink:0
                width:vw(174)
                height: vh(64)
                background:linear-gradient(to right,rgba(14,103,160,.5),rgba(0,0,0,0))
                border-left:5px solid #0e67a0
                display:flex
                flex-direction:column
                justify-content:space-around
                margin-top:vh(13)
                .upContent
                    display:flex
                    div:nth-child(1)
                        flex:2
                        div
                            width:vw(12)
                            height:vh(12)
                            border:4px solid #fff
                            border-radius : 50%
                            background: #f00
                            margin: 0 auto
                            margin-top:vh(2)
                    div:nth-child(2)
                        flex:8
                        font-size:vw(15)
                .downContent
                    display:flex
                    div:nth-child(1)
                        flex:2
                    div:nth-child(2)
                        flex:8
                        font-size:vw(20)
                        color:rgba(255,241,148,1)
                        span
                            font-size:vw(15)
                            color:#fff
        .geoIntro
            width:vw(365)
            margin-top:vh(28)
            .geoIntroTitle
                margin-bottom:vh(13)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .geoIntroWord
                    color:#00EAFF
                    font-size:vw(16)
            .geoCarousel
                width: vw(365)
                height: vh(172)
                border: 1px solid #0c4259;
                padding-top:vh(8)
                padding-left:vw(8)
                .carouseContent
                    display:flex
                    .carouseImg 
                        flex-shrink:0 
                        width:vw(163)
                        height:vh(135)  
                        margin-right:vw(12)  
                        border:1px solid #ddd
                    .carouseWord
                        flex-shrink:0 
                        width:vw(168)
                        height:vh(139)  
                        padding:vh(12) vw(0)
                        line-height:vh(17)
        .safeProduc
            margin-top:vh(15)
            margin-bottom: vh(25)
            background:url('/data/images/hngk/liangdian.png') no-repeat
            background-size:100% 100%
            width:vw(364)
            height:vh(221)
            padding-top:vh(24)
            .dangerItem
                margin-left:vw(29)
                span:nth-child(1)
                    font-size:vw(16)
                span:nth-child(2)
                    font-size:vw(22)
                    color:rgba(55,220,255,1)
            .enterpriseNum
                margin-top:vh(26)
                display:flex
                justify-content:space-around
                .enterprise
                    display:flex
                    flex-direction:column
                    justify-content:space-between
                    height:vh(50)
                    div:nth-child(1)
                        font-size:vw(16)
                        flex-shrink:0
                        width:vw(100)
                        text-align:center
                    div:nth-child(2)
                        flex-shrink:0
                        width:vw(100)
                        text-align:center
                        font-size:vw(16)
                        color:rgba(255,188,50,1)
            .twoPoints
                margin-left:vw(29)
                margin-top:vh(21)
                font-size:vw(16)
                span:nth-child(1)
                    color:#fff
                span:nth-child(2)
                    color:rgba(55,220,255,1)
                span:nth-child(3)
                    color:rgba(55,220,255,1)
            .oneArea
                margin-top:vh(21)
                margin-left:vw(29)
                font-size:vw(16)
                span:nth-child(1)
                    color:#fff
                span:nth-child(2)
                    color:rgba(55,220,255,1)
        .troubleMsg
            width:vw(363)
            height:vh(220)
            background:url('/data/images/hngk/shigu.png') no-repeat
            background-size:100% 100%
            padding-top:vh(19)
            text-align:center
            font-size:vw(13)
            .troubleTitle
                color:#00e5ff
            .troubleList
                margin-top:vh(20)
                .troubleItem
                    margin-bottom:vh(18)
</style>